<template>

  <div class="content">
    <div class="area_box">
      <div class="cat_hd">购买信息</div>
      <div class="cat_bd">

        <div class="uni-list-chat">
          <div class="item">
            <div class="uni-list-cha-image">
              <img :src="resultList.suolueImg" />
            </div>
            <div class="uni-list-chat-content-extra">
              <div>{{resultList.soureName}}</div>
              <div style="color:#AAAAAA;font-size: 12px;">{{resultList.soureFormat}}</div>
            </div>
          </div>

          <div class="item">
            <div class="zhong-text">{{resultList.prices}} X 1</div>
          </div>
        </div>

      </div>
    </div>
    <div class="area_box">
      <div class="cat_bd">
        <div class="general">
          <div class="pay-l">余额支付</div>

          <div class="pay-r">
            支付：<span>{{resultList.prices}}</span>
          </div>

        </div>
        <div class="cat-bd-con">
          <!-- <div class="con-t-text">余额支付:</div> -->
          <div class="con-t-select">

            <el-radio-group v-model="radio" class="con-t-select-radio">
              <el-radio :label="3">
                余额剩余：（￥{{myInfo.balancePrice}}）
                <!-- <img class="con-t-alipay" src="../assets/images/t-12.png" />支付宝 -->
              </el-radio>
              <!-- <el-radio :label="6"><img class="con-t-watpay" src="../assets/images/t-13.png" />微信</el-radio> -->
            </el-radio-group>

          </div>

        </div>
      </div>
      <el-button class="goBuy" :loading="loading" @click="goBuy">立即支付</el-button>

    </div>

    <!-- <div class="popup-box" v-show="qrCodeUrlcod">
      <div class="popup-content" v-if="!isPayStatus">
        <div>订单号：<span style="font-size: 22px;color: #e03104;font-weight: 600;">21321321321321</span></div>
        <div style="margin-bottom: 10px;">付款金额：<span style="font-size: 22px;color: #e03104;font-weight: 600;">21321321321321</span></div>
        <div class="qrCodeUrl" ref="qrCodeUrl" v-if="!isOut"></div>
        <div class="out" v-if="isOut">支付超时...</div>
        <div style="text-align: center; margin-top: 10px;">
          <img class="con-t-watpay" src="../assets/images/t-12.png" />请使用支付宝APP扫描二维码支付。
        </div>
      </div>
      <div class="popup-content" v-if="isPayStatus">
        <div class="isPayStatus-box">
          <div class="isPayStatus-hd">
            <img src="../assets/images/t-10.png" />
            订单支付成功
          </div>
          <div class="isPayStatus-bd">
            <div class="isPayStatus-item">
              <div class="text-itme-l">订单号</div>
              <div class="text-itme-r">51268989562626</div>
            </div>
            <div class="isPayStatus-item">
              <div class="text-itme-l">支付方式</div>
              <div class="text-itme-r">微信支付</div>
            </div>
            <div class="isPayStatus-item">
              <div class="text-itme-l">订单金额</div>
              <div class="text-itme-r">365.26</div>
            </div>
          </div>
          <div class="isPayStatus-fd">
            <div class="isPayStatus-fd-l-but">查看订单</div>
            <div class="isPayStatus-fd-r-but">返回首页</div>
          </div>
        </div>
      </div>
    </div> -->

    <div class="popup-box" v-show="qrCodeUrlcod">

      <div class="popup-content">
        <div class="isPayStatus-box">
          <div class="isPayStatus-hd">
            <img src="../assets/images/t-10.png" />
            订单支付成功
          </div>
          <div class="isPayStatus-bd">
            <div class="isPayStatus-item">
              <div class="text-itme-l">订单号：</div>
              <div class="text-itme-r">{{order.orderSn}}</div>
            </div>
            <div class="isPayStatus-item">
              <div class="text-itme-l">购买类型：</div>
              <div class="text-itme-r">{{order.message}}</div>
            </div>
            <div class="isPayStatus-item">
              <div class="text-itme-l">支付方式：</div>
              <div class="text-itme-r">余额支付</div>
            </div>
            <div class="isPayStatus-item">
              <div class="text-itme-l">订单金额：</div>
              <div class="text-itme-r">{{order.orderPrice}}</div>
            </div>
          </div>
          <div class="isPayStatus-fd">
            <div class="isPayStatus-fd-l-but" @click="goMy">查看订单</div>
            <div class="isPayStatus-fd-r-but" @click="goHome">返回首页</div>
          </div>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
export default {
  data () {
    return {
      qrCodeUrlcod: false,
      isPayStatus: false,
      isOut: false,
      radio: 3,
      myInfo: '',
      resultList: '',
      loading: false,
      order: ''
    }
  },
  mounted () {
    var e = this.$route.query
    if (e) {
      this.$apis
        .getDetailst({
          id: e.id
        })
        .then(res => {
          this.resultList = res.data.data
          console.log(this.resultList)
        })
    }
    this.getInfo()
  },
  methods: {
    getInfo () {
      this.$apis.getInfo().then(res => {
        this.myInfo = res.data.data
      })
    },
    goHome () {
      this.$router.replace({ path: './' })
    },
    goMy () {
      this.$router.replace({ path: './my', query: { id: 2 } })
    },
    goBuy () {
      this.loading = true
      this.$apis.mateCreateOrder({ goodsId: this.resultList.id }).then(res => {
        if (res.data.errno == 0) {
          var result = res.data.data
          this.$apis.payOrder({ orderSn: result.orderSn }).then(res => {
            if (res.data.errno == 0) {
              this.order = res.data.data
              this.qrCodeUrlcod = true
              this.loading = false
            }
          })
        } else {
          this.$message.error(res.data.errmsg)
          this.loading = false
        }
      })
    }
    // creatQrCode (url) {
    //   var qrcode = new QRCode(this.$refs.qrCodeUrl, {
    //     text: url, // 需要转换为二维码的内容
    //     width: 320,
    //     height: 320,
    //     colorDark: '#000000',
    //     colorLight: '#ffffff',
    //     correctLevel: QRCode.CorrectLevel.H
    //   })
    // }
  }
}
</script>

<style lang="less" scoped>
.isPayStatus-fd {
}
.isPayStatus-fd div {
  width: 45%;
  height: 44px;
  font-size: 16px;
  font-family: SimHei;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 44px;
  border: 1px solid #d82241;
  cursor: pointer;
}
.isPayStatus-fd-l-but {
  background: #da2740;
}
.isPayStatus-fd-r-but {
  color: #d82241 !important;
  background: #fff9f8;
}
.isPayStatus-fd,
.isPayStatus-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  line-height: 30px;
}
.text-itme-l {
  font-size: 16px;
  font-family: SimHei;
  font-weight: 600;
  color: #444444;
  width: 83px;
  text-align: right;
  margin-right: 20px;
}
.text-itme-r {
  font-size: 16px;
  font-family: SimHei;
  font-weight: 400;
  color: #888888;
  flex: 3;
  white-space: pre-wrap;
}
.isPayStatus-box {
  padding: 30px 10px;
}
.isPayStatus-hd {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.isPayStatus-hd img {
  width: 42px;
  height: 42px;
  margin-right: 20px;
}
.isPayStatus-bd {
  border: 1px solid #efefef;
  border-left: none;
  border-right: none;
  padding: 20px 10px;
  margin: 20px 0px;
}
.popup-box {
  background: #00000080;
  position: fixed;
  z-index: 999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.popup-content {
  padding: 15px;
  background: #ffffff;
  white-space: nowrap;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 350px;
  height: 380px;
  border-radius: 5px;
}
.content {
  min-height: calc(100vh - 260px);
  background: #ffffff;
  border-radius: 10px;
  margin-top: 30px;
  padding-bottom: 40px;
}
.area_box {
  width: 90%;
  margin: 0px auto;
}

.cat_bd {
  border: 1px solid #eeeeee;
  padding: 30px;
}

.cat-bd-con {
  border-top: 1px solid #eeeeee;
  margin-top: 40px;
  padding-top: 30px;
  margin-bottom: 20px;
}

.pay-l {
  font-size: 18px;
  font-family: SimHei;
  font-weight: 600;
  color: #444444;
  height: 40px;
  line-height: 40px;
  padding-left: 60px;
  background: url("../assets/images/t-14.png") no-repeat;
  background-size: contain;
}
.pay-r {
  font-size: 16px;
  font-family: SimHei;
  font-weight: 600;
  color: #444444;
}
.pay-r span {
  font-size: 26px;
  font-weight: bold;
  color: #da2740;
}
.con-t-text {
  font-size: 18px;
  font-weight: bold;
  color: #444444;
}

.con-t-select {
}
.con-t-select label {
  display: inline-block;
  margin-right: 50px;
  border: 1px solid #eeeeee;
  padding: 5px 10px;
  box-sizing: border-box;
  margin-top: 10px;
}
.con-t-select label img {
  width: 24px;
  height: 24px;
}
.con-t-alipay {
  vertical-align: middle;
  margin: 0px 10px;
}
.con-t-watpay {
  width: 34px;
  height: 28px;
  vertical-align: middle;
  margin: 0px 10px;
}

.goBuy {
  width: 170px;
  height: 40px;
  background: #da2740;
  color: #ffffff;
  font-size: 18px;
  font-family: SimHei;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
  margin-top: 40px;
  white-space: nowrap;
  margin-left: 10%;
}
.out {
  width: 350px;
  height: 350px;
  background: #f5f7fa url("../assets/images/t-15.png") no-repeat center center;
  line-height: 580px;
  color: #bbb;
  text-align: center;
  font-size: 28px;
}
.qrCodeUrl {
  text-align: center;
  width: 320px;
  height: 320px;
  margin: auto;
  position: relative;
}

.cat_hd {
  height: 34px;
  line-height: 34px;
  font-size: 18px;
  font-weight: bold;
  color: #444444;
  margin-top: 40px;
}

.item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.uni-list-chat {
  display: flex;
}

.uni-list-chat .item:nth-child(1) {
  width: 80%;
}
.uni-list-chat .item:nth-child(2) {
  width: 20%;
}
.uni-list-cha-image,
.uni-list-cha-image img {
  width: 60px;
  height: 60px;
}
.uni-list-chat-content-extra {
  font-size: 14px;
  font-family: SimHei;
  font-weight: 400;
  color: #444444;
  line-height: 20px;
  margin-left: 15px;
}
.zhong-text {
  border-left: 1px solid #eeeeee;
  height: 60px;
  line-height: 60px;
  border-bottom: 0px;
  border-top: 0px;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}
.you-text {
  text-align: center;
  width: 70%;
  padding: 40px 0px;
}
.con-t-select-radio {
  width: 100%;
}
</style>
